<template>
  <div class="login">
    <div class="welcome">
      <p>欢迎来到</p>
      <p>博客管理系统</p>
    </div>
    <div class="login-form">
      <h3>管理员登录</h3>
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input v-model="form.username" placeholder="登录名">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input :type="isPwd" v-model="form.password" placeholder="密码">
            <i slot="prefix" class="el-input__icon el-icon-unlock"></i>
            <i slot="suffix" class="el-input__icon el-icon-view" @click="showPwd"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;" @click="login">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: 'admin',
          password: '123456'
        },
        isPwd: "password"
      }
    },
    methods: {
      showPwd() {
        this.isPwd = this.isPwd === "password" ? "text" : "password";
      },
      login() {
        let params = {
          username: this.username,
          password: this.password
        }
        this.postAxios('/users/login', {params}).then(res => {
          console.log(res);
        })
        this.$router.push('/')
      }
    }
  }
</script>

<style lang="less" scoped>
  .login {
    width: 100%;
    height: 100vh;
    background-image: url("../../../public/img/login/bg.png");
    background-size: 100% 100%;
    position: relative;

    .welcome {
      width: 400px;
      position: absolute;
      top: 50%;
      left: 20%;
      transform: translateY(-50%);
      color: white;

      p {
        font-size: 20px;
        line-height: 50px;

        &:last-child {
          font-size: 30px;
        }
      }
    }

    .login-form {
      width: 300px;
      position: absolute;
      border: 2px solid rgba(255, 255, 255, 0);
      top: 50%;
      right: 10%;
      transform: translateY(-50%);
      padding: 30px;
      border-radius: 10px;
      transition: border 2s;
      box-sizing: border-box;

      h3 {
        margin-bottom: 30px;
        color: white;
      }

      &:hover {
        color: black;
        border: 2px solid rgba(255, 255, 255, 0.5);
      }
    }
  }
</style>